<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习资源</title>
    <!-- 引入Element UI样式文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        .h{
            color:red;  /* 红色文本 */
        }
        .i{
            color:yellow;  /* 黄色文本 */
        }
    </style>
</head>
<style>
    	body {
        background-image: url("bei2.jpg"); /* 背景图片路径 */
        background-size: cover;          /* 背景图片覆盖整个页面 */
        background-repeat: no-repeat;   /* 背景图片不重复 */
        background-attachment: fixed;    /* 背景图片固定不滚动 */
        margin: 0;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;  /* 最小高度为视窗高度 */
    }
      h1{
        justify-content: center;  /* 水平居中 */
        color: aliceblue;  /* 标题文字颜色 */
      }
</style>
<body>
    <div id="www">
        <h1>不知道展示什么好，就请你看看我上的网课吧，gogogo！</h1> 
        <!-- 使用 @click 事件跳转 -->
        <el-button @click="openLink(one)" class="h">我的c语言启蒙</el-button><br />
        <el-button @click="openLink(two)" class="i">我的高数课</el-button><br />
        <el-button @click="openLink(three)" class="h">我的电路课</el-button><br />
        <el-button @click="openLink(four)" class="i">我的电路课</el-button><br />
    </div>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <!-- 引入Element UI库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
       const www = new Vue({
            el: '#www',  // 挂载到id为www的元素上
            data() {
                return {
                    one: 'https://space.bilibili.com/37974444?spm_id_from=333.337.0.0',  // C语言课程链接
                    two: 'https://www.bilibili.com/video/BV1Eb411u7Fw/?spm_id_from=333.1391.0.0&p=116&vd_source=836744916ab9bb2acd73c6fc9c2f0a56',  // 高数课程链接
                    three: 'https://www.bilibili.com/video/BV1rj411x7yo/?spm_id_from=333.1391.0.0&vd_source=836744916ab9bb2acd73c6fc9c2f0a56',  // 电路课程链接1
                    four: 'https://www.bilibili.com/video/BV1HV4y1a7n4?spm_id_from=333.788.videopod.episodes&vd_source=836744916ab9bb2acd73c6fc9c2f0a56&p=4'  // 电路课程链接2
                };
            },
            methods: {
                openLink(url) {
                    window.open(url, '_blank');  // 在新标签页打开链接
                }
            }
        });
    </script>
</body>
</html>